<template>
	<view class="">
		<view class="screeningArea">
			<view class="delica-view" :class="{'isfixed':isfixed}">
				<view class="delica-list delica-grow">
					<text @click="showDynamicShaiXuan">{{dynamicShaiXuan}}</text>
					<image src="../../../static/shop/上下箭头.png" mode="widthFix"></image>
				</view>
				<view class="delica-grow" @click="saleHigh">销量高</view>
				<view class="delica-grow" @click="saleHigh">速度快</view>
				<view class="delica-grow"  @click="saleHigh">津贴联盟</view>
				<view class="delica-list delica-right" @click="screeningClick">
					<text>筛选</text>
					<image src="../../../static/shop/排序5.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 综合排序筛选 -->
			<view class="sortlist" v-if="drop">
				<block v-for="(item,index) in sortlist" :key="index">
					<text :class="{activeDynamicShaiXuan:index==num}" @click="activeDynamicShaiXuan(index,item.name)">{{item.name}}</text>
				</block>
			</view>
			<!-- 多个筛选区域 -->
			<view class="shaixuan" v-if="screening">
				<!-- 多选，商家特色 -->
				<block v-for="(item,index) in shaixuan" :key="index">
					<view class="">
						<view class="checkbox-title">{{item.title}}</view>
						<view class="checkbox-box">
							<block v-for="(it,inx) in item.datas" :key="idx">
								<text class="checkbox-choice">{{it.name}}</text>
							</block>
						</view>
					</view>
				</block>
				<!--单选:人均价  -->
				<block v-for="(item,index) in person" :key="index">
					<view class="">
						<view class="checkbox-title">{{item.title}}</view>
						<view class="checkbox-box">
							<block v-for="(it,inx) in item.datas" :key="idx">
								<text class="checkbox-choice">{{it.name}}</text>
							</block>
						</view>
					</view>
				</block>
				<view class="sortlist-bottom">
					<text>清空</text>
					<text>完成</text>
				</view>
			</view>
		</view>
		<!-- 透明背景 -->
		<view class="yin" v-if="yin" @click="hiddenYin"></view>
	</view>
</template>

<script>
	export default {
		props:{
			sortlist:Array,
			shaixuan:Array,
			person:Array,
			isfixed:Boolean
		},
		data() {
			return {
				drop:false,
				screening:false,
				dynamicShaiXuan:'综合排序',
				num:0,
				yin:false
			}
		},
		methods: {
			// 点综合排序
			showDynamicShaiXuan(){
				this.drop=true;
				this.ying()
			},
			// 点筛选的每一项
			activeDynamicShaiXuan(index,val){
				// console.log(index,val);
				this.dynamicShaiXuan=val,
				this.num=index;
				this.drop=false;
				this.yin=false
			},
			// 透明背景函数
			ying(){
				this.yin=true
			},
			// 隐藏透明背景
			hiddenYin(){
				this.yin=false
				this.drop=false;
				this.screening=false
			},
				
			saleHigh(){
				this.drop=false;
				this.yin=false;
				this.screening=false
			},
			screeningClick(){
				this.drop=false;
				this.screening=true;
				this.ying()
			}
		}
	}
</script>

<style scoped>
	.isfixed{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
	}
	.screeningArea{
		position: absolute;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 99;
	}
	.delica-view image{
		width: 30rpx;
		height: 30rpx;
		display: block;
	}
	.delica-view{
		font-size: 30rpx;
		color: #666666;
		height: 70rpx;
		display: flex;
		align-items: center;
		padding: 0 15rpx;
		background-color: #ffffff;
	}
	.delica-list{
		display: flex;
		align-items:center
	}
	.delica-right{
		justify-content: flex-end;
		flex-grow: 5;
	}
	.delica-grow{
		flex-grow: 1;
	}
	.sortlist{
		background-color: #FFFFFF;
		
	}
	.sortlist text{
		display: block;
		font-size: 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 15rpx;
		border-top:1rpx solid #ededed ;
	}
	.shaixuan{
		height: 700rpx;
		overflow: hidden;
		overflow-y: scroll;
		position: relative;
		background-color: #FFFFFF;
	}
	.checkbox-title{
		padding: 0 15rpx;
		font-size: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
	.checkbox-choice{
		font-size: 28rpx;
		height: 55rpx;
		line-height: 55rpx;
		background-color: #f8f8f8;
		color: #666666;
		width: calc((100% / 3) - 15px) !important;
		margin: 7.5rpx;
		text-align: center;
		border-radius: 5rpx;
		display: block;
	}
	.checkbox-box{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.sortlist-bottom{
		background-color: #ffffff;
		height: 80rpx;
		line-height: 80rpx;
		border-top: 1rpx solid #e4e4e4;
		display: flex;
		justify-content: space-around;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.sortlist-bottom text{
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		flex-grow: 1;
	}
	.sortlist-bottom text:nth-child(1){
		border-right: 1rpx solid #e4e4e4;
	}
	.sortlist-bottom text:nth-child(2){
		background-color: #ffd348;
	}
	.activeDynamicShaiXuan{
		color: #f89903 !important;
	}
	.yin{
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
</style>
